<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>boss直聘，济南java公司分布图</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }

        #info {
            width: 603px;
            padding-top: 3px;
            overflow: hidden;
        }

        .btn {
            width: 93px;
        }

        #container {
            min-width: 600px;
            min-height: 900px;
        }
    </style>
</head>
<body>

<form class="form-inline" id="app" style="margin-top: 20px">
    <div class="form-group">
        <label for="exampleInputName2">正向内容</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="" v-model="queryKeywords">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail2">反向内容</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="" v-model="deleteKeywords">
    </div>
    <button type="button" class="btn btn-primary" @click="search()">搜索</button>
    <h4>说明：正向内容为要查询的关键词，反向内容为排除的关键词，多个词以逗号隔开。
        <br>搜索内容范围包括公司名称，公司地址，招聘详细描述。
        <br>点击公司名称会跳转到官方详细页面，PC端打开体验最佳。
        <br>数据每天凌晨1点更新。</h4>
</form>
<div id="container"></div>
<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.3/vue.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=JLPBZ-2AS6P-VXDDG-VDTKP-O3ZBS-A2BG2"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            queryKeywords: '',
            deleteKeywords: '',
            jobMap: [{}],
        },
        methods: {
            search() {
                let _this = this;
                $.get("/job/boss", {
                    queryKeywords: this.queryKeywords,
                    deleteKeywords: this.deleteKeywords
                }, function (data) {
                    _this.jobMap = data;
                    _this.generateMap();
                })
            },
            generateMap() {
                let center = new qq.maps.LatLng(36.652232, 117.12487);
                let map = new qq.maps.Map(document.getElementById('container'), {
                    center: center,
                    zoom: 13
                });
                let _this = this;
                for (let i = 0; i < _this.jobMap.length; i++) {
                    // var company =;
                    //添加监听事件
                    qq.maps.event.addListener(new qq.maps.Label({
                        position: new qq.maps.LatLng(_this.jobMap[i].longitude.split(",")[0], _this.jobMap[i].longitude.split(",")[1]),
                        map: map,
                        content: _this.jobMap[i].company
                    }), 'click', function () {
                        window.open(_this.jobMap[i].url, _this.jobMap[i].name)
                    });
                    console.log(i)
                }
                console.log(this.jobMap);
            }
        },
        mounted: function () {
            this.search();
        },
        created: function () {

        }
    })
</script>
</body>
</html>
